<template>
  <div>
    <medicalCard title="会员列表">
      <template v-slot:head>
        <Form ref="formInline" :label-width="70" inline>
          <FormItem label="昵称">
            <Input v-model="params.nickname" type="text" clearable placeholder="昵称" class="headFormItemWidth" />
          </FormItem>
          <FormItem label="手机号">
            <Input v-model="params.tel" type="text" clearable placeholder="手机号" class="headFormItemWidth" />
          </FormItem>
          <FormItem label="邀请码">
            <Input v-model="params.invitation_code" type="text" clearable placeholder="邀请码" class="headFormItemWidth" />
          </FormItem>
<!--          <FormItem label="身份证号">-->
<!--            <Input v-model="params.card_no" type="text" clearable placeholder="身份证号" class="headFormItemWidth" />-->
<!--          </FormItem>-->
          <FormItem label="状态">
            <Select v-model="params.del_flag" placeholder="状态" class="headFormItemWidth" filterable clearable>
              <Option value="1">正常</Option>
              <Option value="2">停用</Option>
            </Select>
          </FormItem>
          <FormItem >
            <Button icon="md-search" type="primary" class="headFormItemButton" @click="search" >搜索</Button>
            <Button icon="md-redo" class="headFormItemButton" @click="reload()" >重置</Button>
          </FormItem>
        </Form>
        <Divider style="margin-top:0px;" />
      </template>
      <template v-slot:body>
        <template>
          <Button icon="md-add" type="success" class="headFormItemButton" @click="add()">新增</Button>
          <Button icon="md-trash" type="error" class="headFormItemButton" @click="delList">删除</Button>
        </template>
        <vxe-table border="outer" header-align="center" ref="my_table"
                   :loading="loading"
                   :data="tableData"
                   :stripe="true"
                   style="margin-top: 5px;margin-bottom: 10px"
                   :highlight-hover-row="true"
                   :scroll-x="{gt: 0}" align="center" show-overflow="tooltip">
          <vxe-table-column width="60" fixed="left" type="checkbox"></vxe-table-column>
          <vxe-table-column fixed="left" title="头像" min-width="80">
            <template v-slot="{ row }">
              <img :src="row.head_sculpture" preview width="40px" height="40px" />
            </template>
          </vxe-table-column>
          <vxe-table-column field="nickname" fixed="left" title="昵称" min-width="200"></vxe-table-column>
          <vxe-table-column field="tel" title="手机号" min-width="200"></vxe-table-column>
          <vxe-table-column field="reference" title="推荐人" min-width="200"></vxe-table-column>
          <vxe-table-column field="balance" title="余额" min-width="200"></vxe-table-column>
          <vxe-table-column field="invitation_code" title="邀请码" min-width="200"></vxe-table-column>
          <vxe-table-column field="del_flag" title="状态" min-width="100">
            <template v-slot="{ row }">
              <i-Switch v-model="row.del_flag" size="large" true-color="#13ce66" false-color="#ff4949" true-value="1" false-value="2" @on-change="editState(row)">
                <template #open>
                  <span>正常</span>
                </template>
                <template #close>
                  <span>停用</span>
                </template>
              </i-Switch>
            </template>
          </vxe-table-column>
          <vxe-table-column field="create_time" title="创建时间" min-width="200"></vxe-table-column>
          <vxe-table-column width="200" fixed="right" title="操作">
            <template scp-layout="true" v-slot="{ row }">
              <ButtonGroup>
                <Button type="info" icon="logo-yen"  style="padding: 0" @click="recharge(row)"></Button>
                <Button type="warning" icon="md-create" style="padding: 0" @click="edit(row)"></Button>
                <Button type="error" icon="md-trash" style="padding: 0" @click="del(row)"></Button>
              </ButtonGroup>
            </template>
          </vxe-table-column>
        </vxe-table>
        <Row type="flex" justify="end">
          <Page :current="params.pageNo" :total="params.totalRecord" show-sizer :page-size="params.pageSize" show-elevator
                @on-change="pageAction" @on-page-size-change="pageSizeChange"/>
        </Row>
      </template>
    </medicalCard>
    <Modal v-model="modal.show" draggable sticky scrollable :closable="false" :mask="false" :title="modal.title" width="750">
      <Row>
        <Col span="22" offset="1">
          <Form ref="formInline" :label-width="70" label-colon >
            <Row>
              <Col span="11">
                <FormItem label="邀请码" class="formItem" style="float: left">
                  <Input  v-model="modal.data.invitation_code" type="text" clearable placeholder="邀请码" class="headFormItemWidth" style="float: left" />
                </FormItem>
              </Col>
              <Col span="11" offset="2">
                <FormItem label="昵称" class="formItem">
                  <Input v-model="modal.data.nickname" type="text" clearable placeholder="昵称"  class="headFormItemWidth" />
                </FormItem>
              </Col>
            </Row>
            <Row>
              <Col span="11">
                <FormItem label="手机号" class="formItem" style="float: left">
                  <Input  v-model="modal.data.tel" type="text" clearable placeholder="手机号" class="headFormItemWidth" />
                </FormItem>
              </Col>
              <Col span="11" offset="2">
                <FormItem label="密码" class="formItem">
                  <Input  v-model="modal.data.password" type="text" clearable placeholder="登录密码" class="headFormItemWidth" />
                </FormItem>
              </Col>
            </Row>
            <Row>
              <Col span="11">
                <FormItem label="确认密码" class="formItem" style="float: left;">
                  <Input  v-model="modal.data.passwordc" type="text" clearable placeholder="确认登录密码" class="headFormItemWidth" />
                </FormItem>
              </Col>
              <Col span="11" offset="2">
                <FormItem label="状态" class="formItem">
                  <RadioGroup v-model="modal.data.del_flag" type="button" button-style="solid" class="headFormItemWidth">
                    <Radio label="1">正常</Radio>
                    <Radio label="2">停用</Radio>
                  </RadioGroup>
                </FormItem>
              </Col>
            </Row>
          </Form>
        </Col>
      </Row>
      <template #footer>
        <Button @click="modal.show = false">取消</Button>
        <Button type="primary" @click="addOk()">确定</Button>
      </template>
    </Modal>
    <Modal v-model="modal2.show" draggable sticky scrollable :closable="false" :mask="false" :title="modal2.title" >
      <Row >
        <Col span="22" offset="1">
          <Row>
            <Col span="24">
              <Form ref="form2" :label-width="70" label-colon >
                <Row>
                  <Col span="24">
                    <FormItem label="金额" >
                      <InputNumber placeholder="金额" :step="0.1" v-model="modal2.data.amount" style="width: 100%"  />
                    </FormItem>
                  </Col>
                </Row>
                <Row>
                  <Col span="24">
                    <FormItem label="操作描述">
                      <Input  v-model="modal2.data.describe" type="textarea" clearable placeholder="操作描述" :rows="7"  style="width: 100%;" />
                    </FormItem>
                  </Col>
                </Row>
              </Form>
            </Col>
          </Row>
        </Col>
      </Row>
      <template #footer>
        <Button @click="modal2.show = false">取消</Button>
        <Button type="primary" @click="rechargeOk()">确定</Button>
      </template>
    </Modal>
  </div>

</template>

<script>
import medicalCard from '@/view/medical-page/components/medical-card'
import {
  deleteMedicalMember,
  getMedicalMemberPageList,
  saveMedicalMember,
  addMedicalMemberBalance
} from '@/api/medical'
export default {
  name: 'hospital-list',
  components: {
    medicalCard
  },
  data () {
    return {
      params: {
        pageNo: 1,
        pageSize: 10,
        totalRecord: 0
      },
      loading: false,
      tableData: [],
      modal: {
        show: false,
        type: null,
        data: {},
        title: ''
      },
      modal2: {
        show: false,
        type: null,
        data: {},
        title: ''
      }
    }
  },
  computed: {
  },
  inject: [
    'reload'
  ],
  methods: {
    recharge (row) {
      this.modal2.data = {}
      this.$set(this.modal2.data, 'amount', 0)
      this.modal2.data.member_id = row.member_id
      this.modal2.title = '充值'
      this.modal2.show = true
    },
    rechargeOk () {
      addMedicalMemberBalance(this.modal2.data).then(ret => {
        if (ret.data.errcode === 0) {
          this.modal2.show = false
          this.$Message.success({
            content: '操作成功,\n' + ret.data.errmsg
          })
          this.init()
        } else {
          this.$Message.error({
            content: '操作失败,\n' + ret.data.errmsg
          })
        }
      })
    },
    del (row) {
      this.$Modal.confirm({
        title: '<p style="color:#f60;text-align:center">\n' +
          '                    <Icon type="ios-information-circle"></Icon>\n' +
          '                    <span>删除操作</span>\n' +
          '                </p>',
        content: '<p>确定要执行该操作吗？</p>',
        width: 300,
        loading: true,
        onOk: () => {
          deleteMedicalMember({ member_id: row.member_id }).then(ret => {
            if (ret.data.errcode === 0) {
              this.$Message.success({
                content: '操作成功,\n' + ret.data.errmsg
              })
              this.init()
            } else {
              this.$Message.error({
                content: '操作失败,\n' + ret.data.errmsg
              })
            }
          })
          this.$Modal.remove()
        }
      })
    },
    delList () {
      let selectRecords = this.$refs.my_table.getCheckboxRecords()
      if (!selectRecords || selectRecords.length === 0) {
        this.$Message.error({
          content: '操作失败,\n' + '请选择删除项'
        })
        return
      }
      let array = selectRecords.map((item) => item.member_id)
      this.$Modal.confirm({
        title: '<p style="color:#f60;text-align:center">\n' +
          '                    <Icon type="ios-information-circle"></Icon>\n' +
          '                    <span>删除操作</span>\n' +
          '                </p>',
        content: '<p>确定要执行该操作吗？</p>',
        width: 300,
        loading: true,
        onOk: () => {
          deleteMedicalMember({ array: array }).then(ret => {
            if (ret.data.errcode === 0) {
              this.$Message.success({
                content: '操作成功,\n' + ret.data.errmsg
              })
              this.init()
            } else {
              this.$Message.error({
                content: '操作失败,\n' + ret.data.errmsg
              })
            }
          })
          this.$Modal.remove()
        }
      })
    },
    editState (row) {
      let params = {
        member_id: row.member_id,
        del_flag: row.del_flag
      }
      this.saveMedicalMember(params)
    },
    edit (row) {
      this.modal.data = row
      this.modal.data.password = null
      this.modal.title = '修改'
      this.modal.type = 1
      this.modal.show = true
    },
    add () {
      this.modal.data = {}
      this.modal.data.del_flag = '1'
      this.modal.title = '新增'
      this.modal.type = 0
      this.modal.show = true
    },
    addOk () {
      this.saveMedicalMember(this.modal.data)
    },
    saveMedicalMember (e) {
      saveMedicalMember(e).then(ret => {
        if (ret.data.errcode === 0) {
          this.modal.show = false
          this.$Message.success({
            content: '操作成功,\n' + ret.data.errmsg
          })
          this.init()
        } else {
          this.$Message.error({
            content: '操作失败,\n' + ret.data.errmsg
          })
        }
      })
    },
    search () {
      this.params.pageNo = 1
      this.params.totalRecord = 0
      this.init()
    },
    init () {
      this.loading = true
      getMedicalMemberPageList(this.params).then(ret => {
        if (ret.data.errcode === 0) {
          this.tableData = ret.data.data.results
          this.params.totalRecord = ret.data.data.totalRecord
          this.loading = false
        } else {
          this.$Message.error(ret.data.errmsg)
        }
      })
    },
    pageAction (page) {
      this.params.pageNo = page
      this.init()
    },
    pageSizeChange (e) {
      this.params.pageSize = e
      this.init()
    }
  },
  watch: {
  },
  mounted () {
    this.init()
  }
}
</script>
<style scoped>
.headFormItemWidth{
  width: 200px;
}
.headFormItemButton{
  margin-right: 10px;
}
.formItem{
  float: right;
}
</style>
